<template>
    <div class="navbar">
        <i-checkbox-group :current="current" @change="handleFruitChange">
            <i-checkbox :position="position" :value="value2" i-class='checkBoxBg' color='#c75050'>
            </i-checkbox>
        </i-checkbox-group>
        <div class="bookListCart">
            <img :src="baseImgUrl+result.bookImage" alt="">
            <div class="introduce">
                <h3 class="over">{{result.bookName}}</h3>
                <p class="author over">{{result.author}}</p>
                <p class="oldPrice">
                    <span class="mr26">估&nbsp;&nbsp;&nbsp;价</span>
                    <span class="tit">¥{{result.price}}</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            baseImgUrl: this.BaseUrlImg,
            current: [],
            value2: ''
        }
    },
    props: ['result'],

    methods: {
        handleFruitChange(detail) {
            console.log(detail)
            const index = this.current.indexOf(detail.mp.detail.value)
            index === -1
                ? this.current.push(detail.mp.detail.value)
                : this.current.splice(index, 1)
        }
    }
}
</script>
  <style lang="scss" scoped>
.navbar {
    float: left;
    display: flex;
    justify-content: space-between;
    .bookListCart {
        padding-bottom: 30rpx;
        overflow: hidden;
        position: relative;
        .one {
            position: absolute;
            bottom: 30rpx;
            left: 0;
            height: 36rpx;
            width: 156rpx;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 28rpx;
            line-height: 36rpx;
            text-align: center;
        }
        img {
            width: 90rpx;
            height: 124rpx;
            float: left;
            margin-right: 30rpx;
        }
        .introduce {
            float: left;
            width: 50%;
            .over {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            h3 {
                font-size: 28rpx;
                color: #000;
            }
            .mr16 {
                margin-right: 16rpx;
            }
            .mr26 {
                margin-right: 26rpx;
            }
            .ratings {
                font-size: 28rpx;
                color: #333;
                margin-top: 20rpx;
                .mr16 {
                    margin-right: 16rpx;
                }
            }
            .author {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #333;
            }
            .oldPrice {
                margin-top: 20rpx;
                font-size: 20rpx;
                color: #333;
                margin-right: 6rpx;
                .tit {
                    font-size: 24rpx;
                    color: #c75050;
                }
            }
            .newPrice {
                font-size: 28rpx;
                color: #333;
                margin-right: 6rpx;
                .tit {
                    display: inline-block;
                    width: 96rpx;
                    height: 36rpx;
                    background: #c75050;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 5px;
                    font-size: 24rpx;
                    color: #fff;
                }
                .discount {
                    color: #c78550;
                    margin-left: 10rpx;
                }
            }
        }
        .operationBtns {
            float: right;
            margin-top: 96rpx;
            i {
                background: url('../../../static/index/card.png') no-repeat;
                display: inline-block;
                background-size: cover;
                margin-right: 8rpx;
                width: 28rpx;
                height: 20rpx;
            }
            .buy {
                width: 150rpx;
                height: 50rpx;
                border: 1px solid #c78550;
                font-size: 24rpx;
                line-height: 50rpx;
                margin-bottom: 20rpx;
                border-radius: 5px;
                span {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    color: #c78550;
                    text-align: center;
                    position: relative;
                    i {
                        display: inline-block;
                        background-size: cover;
                        margin-right: 8rpx;
                        width: 28rpx;
                        height: 20rpx;
                    }
                }
            }
            .add {
                width: 150rpx;
                height: 50rpx;
                background: #c78550;
                line-height: 50rpx;
                border: 1px solid #c78550;
                border-radius: 5px;
                span {
                    color: #fff;
                    font-size: 24rpx;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    i {
                        background: url('../../../static/index/addCart.png')
                            no-repeat;
                        height: 30rpx;
                        width: 30rpx;
                        background-size: cover;
                        margin-top: 10rpx;
                    }
                }
            }
        }
    }
}
</style>
  